#annotationsView {
	width: 100%;
	height: 100%;
	user-select: none;

	display: flex;
	flex-direction: column;

	&:focus {
		outline: none;
	}

	.annotations {
		overflow: auto;
		padding: 3px 7px 0;
		flex: 1;

		> *:last-child {
			margin-bottom: 8px;
		}

		.annotation {
			background: var(--material-background);
			outline: 1px solid var(--fill-quinary);
			border-radius: 5px;
			overflow: hidden;

			&:active {
				outline: 1px solid var(--fill-tertiary);
			}

			&.selected {
				background: var(--accent-blue10);
				outline: 3px solid var(--accent-blue50);
			}

			& + .annotation {
				margin-top: 7px;
			}
		}
	}

	.selector {
		padding: 8px 8px;
		border-top: var(--material-panedivider);
		z-index: 1;
		max-height: 140px;
		overflow: auto;

		.colors {
			display: flex;
			flex-wrap: wrap;

			.color {
				padding: 2px;
				display: flex;
				border-radius: 3px;
				margin-left: 1px;

				&:hover, &.dragged-over  {
					background-color: var(--fill-quinary);
				}

				&.selected  {
					background-color: var(--fill-secondary);
					&:hover {
						opacity: 0.75;
					}
				}

				&.inactive {
					svg {
						opacity: 0.4;
					}
				}
			}
		}

		.tags {
			display: flex;
			flex-wrap: wrap;

			&:nth-child(2) {
				margin-top: 4px;
			}

			.tag {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre;
				padding: 2px 4px;
				margin-left: 1px;
				margin-bottom: 1px;
				display: flex;
				align-items: center;

				border-radius: 6px;
				border: 1px solid transparent;

				@if $platform != 'web' {
					cursor: default;
				}

				&.color {
					font-weight: bold;

					.icon {
						margin-inline-end: 4px;
					}
				}

				&:hover, &.dragged-over  {
					background-color: var(--fill-quinary);
				}

				&.selected  {
					background-color: var(--fill-secondary);
					color: var(--color-background);
					&:hover {
						opacity: 0.75;
					}
				}

				&.inactive {
					opacity: 0.6;
				}
			}
		}

		.authors {
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;

			&:nth-child(2) {
				margin-top: 4px;
			}

			.author {
				cursor: default;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre;
				padding: 2px 4px;
				margin-left: 1px;
				margin-bottom: 1px;
				display: flex;
				align-items: center;
				border-radius: 6px;
				border: 1px solid transparent;

				svg {
					margin-inline-end: 4px;
				}

				&.selected {
					color: white;
					background: rgb(89, 139, 236);
				}

				&:hover {
					background: rgb(187, 206, 241);
					border: 1px solid rgb(109, 149, 224);
				}

				&:active, &.active {
					color: white;
					background: rgb(89, 139, 236);
				}

				&.inactive {
					opacity: 0.4;
				}
			}
		}
	}
}
